<template>
  <section>
    <div class="custorm--modelbox graphicfind-edit">
      <renohome-right-nav :custormItemData="custormItemData" @rightNavChange="rightNavChange"></renohome-right-nav>
      <div class="edit-form-item">
        <div class="form-label">颜色选择</div>
        <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">搜索框</span>
          <el-color-picker class="ivu-input" v-model="custormItemData.style.bordercolor" size="mini"></el-color-picker>
          <span class="ivu-input">{{custormItemData.style.bordercolor}}</span>
        </div>
        <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">背景</span>
          <el-color-picker class="ivu-input" v-model="custormItemData.style.bgcolor" size="mini"></el-color-picker>
          <span class="ivu-input">{{custormItemData.style.bgcolor}}</span>
        </div>
        <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">文字</span>
          <el-color-picker class="ivu-input" v-model="custormItemData.style.textcolor" size="mini"></el-color-picker>
          <span class="ivu-input">{{custormItemData.style.textcolor}}</span>
        </div>
      </div>

      <!-- <div class="edit-form-item">
        <div class="form-label mb-20">边角样式</div>
        <div class="flex-row flex-align-c">
          <div class="txbox flex-row flex-justify-c flex-align-c" style="margin-left:0;" @click="changePattern(1)" v-bind:class="{active:custormItemData.style.borderstyle==1}">
            <div class="yuan"></div>
          </div>
          <div class="txbox flex-row flex-justify-c flex-align-c" @click="changePattern(2)" v-bind:class="{active:custormItemData.style.borderstyle==2}">
            <div class="yzt"></div>
          </div>
          <div class="txbox flex-row flex-justify-c flex-align-c" @click="changePattern(3)" v-bind:class="{active:custormItemData.style.borderstyle==3}">
            <div class="cft"></div>
          </div>
        </div>
      </div> -->

      <div class="edit-form-item">
          <div class="form-label mb-20">边角样式</div>
          <el-radio-group
            v-model="custormItemData.style.borderstyle"
            class="flex-row mar-15"
          >
            <el-radio label="2">椭圆</el-radio>
            <el-radio label="1">圆角</el-radio>
            <el-radio label="3">直角</el-radio>
          </el-radio-group>
        </div>

      <!-- <div class="es-form-item">
        <div class="form-label mb-20">文字位置</div>
        <div class="flex-row flex-align-c">
          <div class="txbox flex-row flex-justify-c flex-align-c" style="margin-left:0;" @click="changeAlign(1)" v-bind:class="{active:custormItemData.style.align==1}">
            <img :src="getPath('left.png')" alt="">
          </div>
          <div class="txbox flex-row flex-justify-c flex-align-c" @click="changeAlign(2)" v-bind:class="{active:custormItemData.style.align==2}">
            <img :src="getPath('center.png')" alt="">
          </div>
        </div>
      </div> -->

      <div class="edit-form-item">
          <div class="form-label mb-20">文字位置</div>
          <el-radio-group
            v-model="custormItemData.style.align"
            class="flex-row mar-15"
          >
            <el-radio label="1">居左</el-radio>
            <el-radio label="2">居中</el-radio>
          </el-radio-group>
        </div>

      <div class="edit-form-item">
        <div class="form-label">默认文字</div>
        <el-form label-width="50px" size="mini" class="goodsset" label-position="right" style="margin-top:8px;">
          <el-form-item label="文字">
            <div class="flex-col">
              <el-input placeholder="请输入默认文字" v-model="custormItemData.style.texttip" maxlength="30" size="small"><i slot="suffix" style="line-height: 34px;">
                  {{custormItemData.style.texttip.length}}/30</i></el-input>
              <div style="font-size:12px;">
                <span style="color: rgb(241, 73, 92);">*</span>
                <span>手机端随机显示推荐搜索关键字</span>
                <!-- <span style="color: rgb(241, 73, 92);cursor:pointer">去创建</span> -->
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </section>
</template>

<script>
import defaultConfig from './utils/editConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }

  },
  methods: {
    changeAlign(e) {
      this.$nextTick(() => {
        this.custormItemData.style.align = e
      })
    },
    changePattern(e) {
      this.$nextTick(() => {
        this.custormItemData.style.borderstyle = e
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.graphicfind-edit {
  .txbox {
    border-radius: 3px;
    border: 1px solid transparent;
    margin: 0 15px 0 13px;
    height: 32px;
    width: 32px;
    cursor: pointer;
  }

  .txbox img {
    max-width: 17px;
    max-height: 17px;
  }

  .txbox.active {
    border-color: #409eff;
  }

  .yzt {
    background: #dcdcdc;
    height: 15px;
    width: 26px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
  }

  .cft {
    background: #dcdcdc;
    height: 15px;
    width: 25px;
  }

  .yuan {
    background: #dcdcdc;
    height: 15px;
    width: 25px;
    border-radius: 2px;
  }
}
</style>
